Flutter Container Widget – Detailed Notes

The Container widget is one of the most commonly used layout and styling widgets in Flutter. It is used to create boxes, apply colors, add padding and margins, control width and height, add borders and rounded corners, position child widgets, and create visually structured user interfaces.

Flutter's official documentation describes Container as a convenience widget that combines common painting, positioning, and sizing functionality. :contentReference[oaicite:0]{index=0}

1. What is the Container Widget?

A Container is a Flutter widget that can hold a single child and provide styling, spacing, sizing, alignment, and decoration around that child.

It can be compared to a styled box or division area in web development.

Basic Example

Container(
  child: Text('Hello Flutter'),
)

Here, the Container contains a Text widget as its child.

Simple Container with Color

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text(
    'Hello Flutter',
    style: TextStyle(color: Colors.white),
  ),
)

2. Why Use Container?

The Container widget is useful when you need to:

• Set width and height.
• Add background colors.
• Add padding.
• Add margins.
• Align a child widget.
• Add borders.
• Create rounded corners.
• Add gradients.
• Add shadows.
• Apply transformations.
• Combine multiple styling and layout features in one widget.

3. Basic Container Syntax

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(20),
  alignment: Alignment.center,
  child: Text('Flutter Container'),
)

Common Properties

These properties are part of the current Flutter Container API. :contentReference[oaicite:1]{index=1}

4. Container with Width and Height

The width and height properties control the size of a Container.

Container(
  width: 250,
  height: 150,
  color: Colors.orange,
)

Practical Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container Example'),
        ),
        body: Center(
          child: Container(
            width: 250,
            height: 150,
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Hello Flutter',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

5. Container with Background Color

The color property adds a simple background color behind the child.

Container(
  width: 200,
  height: 100,
  color: Colors.green,
  child: const Center(
    child: Text(
      'Green Box',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Using Different Colors

Container(
  color: Colors.red,
  child: const Text('Red Container'),
)

Container(
  color: Colors.blue,
  child: const Text('Blue Container'),
)

Container(
  color: Colors.amber,
  child: const Text('Amber Container'),
)

6. Container with Padding

Padding creates empty space between the Container's decoration/background and its child.

Container(
  padding: const EdgeInsets.all(20),
  color: Colors.blue,
  child: const Text(
    'Text with padding',
    style: TextStyle(color: Colors.white),
  ),
)

Types of Padding

All Sides

padding: const EdgeInsets.all(20)

Horizontal and Vertical

padding: const EdgeInsets.symmetric(
  horizontal: 20,
  vertical: 10,
)

Specific Sides

padding: const EdgeInsets.only(
  left: 20,
  top: 10,
  right: 20,
  bottom: 10,
)

Padding Concept

Container
+-----------------------------+
|        Padding              |
|   +---------------------+   |
|   |       Child         |   |
|   +---------------------+   |
+-----------------------------+

7. Container with Margin

Margin creates empty space outside the Container.

Container(
  margin: const EdgeInsets.all(20),
  color: Colors.blue,
  child: const Text(
    'Container with margin',
    style: TextStyle(color: Colors.white),
  ),
)

Margin Example

Column(
  children: [
    Container(
      margin: const EdgeInsets.all(10),
      color: Colors.blue,
      child: const Text('First'),
    ),
    Container(
      margin: const EdgeInsets.all(10),
      color: Colors.green,
      child: const Text('Second'),
    ),
  ],
)

Padding vs Margin

Flutter's documentation defines padding as space inside the decoration and margin as empty space surrounding the decoration and child. :contentReference[oaicite:2]{index=2}

8. Container Alignment

The alignment property controls the position of the child inside the Container.

Center Alignment

Container(
  width: 300,
  height: 200,
  color: Colors.blue,
  alignment: Alignment.center,
  child: const Text(
    'Centered Text',
    style: TextStyle(color: Colors.white),
  ),
)

Top Left

alignment: Alignment.topLeft

Top Right

alignment: Alignment.topRight

Bottom Left

alignment: Alignment.bottomLeft

Bottom Right

alignment: Alignment.bottomRight

Center Left

alignment: Alignment.centerLeft

Center Right

alignment: Alignment.centerRight

9. Container with Border

For borders and advanced styling, use the decoration property with BoxDecoration.

Container(
  width: 250,
  height: 100,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
  ),
  child: const Center(
    child: Text('Border Container'),
  ),
)

Different Border Widths

decoration: BoxDecoration(
  border: Border.all(
    color: Colors.red,
    width: 4,
  ),
)

10. Rounded Container

Rounded corners can be created using BorderRadius.

Container(
  width: 250,
  height: 120,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
  ),
  child: const Center(
    child: Text(
      'Rounded Container',
      style: TextStyle(
        color: Colors.white,
        fontSize: 18,
      ),
    ),
  ),
)

Different Radius for Each Corner

decoration: BoxDecoration(
  color: Colors.green,
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(20),
    topRight: Radius.circular(20),
    bottomLeft: Radius.circular(5),
    bottomRight: Radius.circular(5),
  ),
)

11. Container with Box Shadow

Box shadows are useful for creating cards, buttons and elevated UI elements.

Container(
  width: 250,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.4),
        blurRadius: 10,
        spreadRadius: 2,
        offset: const Offset(0, 5),
      ),
    ],
  ),
  child: const Center(
    child: Text('Card'),
  ),
)

Important BoxShadow Properties

12. Container with Gradient

Gradients are created through BoxDecoration.

Linear Gradient

Container(
  width: 300,
  height: 150,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    gradient: const LinearGradient(
      colors: [
        Colors.blue,
        Colors.purple,
      ],
    ),
  ),
  child: const Center(
    child: Text(
      'Gradient Container',
      style: TextStyle(
        color: Colors.white,
        fontSize: 20,
      ),
    ),
  ),
)

Gradient Direction

gradient: const LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: [
    Colors.blue,
    Colors.purple,
  ],
)

13. Radial Gradient

Container(
  width: 300,
  height: 200,
  decoration: const BoxDecoration(
    gradient: RadialGradient(
      colors: [
        Colors.yellow,
        Colors.orange,
        Colors.red,
      ],
    ),
  ),
)

A radial gradient spreads outward from a center point.

14. Container with Image Background

A Container can use DecorationImage to display an image as its background.

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    image: const DecorationImage(
      image: NetworkImage(
        'https://example.com/image.jpg',
      ),
      fit: BoxFit.cover,
    ),
  ),
  child: const Center(
    child: Text(
      'Image Background',
      style: TextStyle(
        color: Colors.white,
        fontSize: 22,
      ),
    ),
  ),
)

15. Container with Icon

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(50),
  ),
  child: const Icon(
    Icons.person,
    color: Colors.white,
    size: 50,
  ),
)

This pattern can be used for profile icons, feature icons and dashboard statistics.

16. Creating a Card Using Container

Container(
  margin: const EdgeInsets.all(16),
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 8,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text(
        'Flutter Course',
        style: TextStyle(
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 10),
      const Text(
        'Learn Flutter and build cross-platform applications.',
      ),
      const SizedBox(height: 15),
      ElevatedButton(
        onPressed: () {},
        child: const Text('Learn More'),
      ),
    ],
  ),
)

17. Container with Text Styling

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.indigo,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text(
    'Welcome to Flutter',
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Colors.white,
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
  ),
)

18. Container Inside Row

Row(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    const SizedBox(width: 10),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    const SizedBox(width: 10),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

Here, the Containers are arranged horizontally because they are children of a Row.

19. Container Inside Column

Column(
  children: [
    Container(
      width: 200,
      height: 80,
      color: Colors.red,
    ),
    const SizedBox(height: 10),
    Container(
      width: 200,
      height: 80,
      color: Colors.green,
    ),
    const SizedBox(height: 10),
    Container(
      width: 200,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

Here, the Containers are arranged vertically.

20. Container with Constraints

The constraints property allows developers to define minimum and maximum dimensions.

Container(
  constraints: const BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 200,
  ),
  color: Colors.blue,
  child: const Text(
    'Container with constraints',
    style: TextStyle(color: Colors.white),
  ),
)

Common BoxConstraints

BoxConstraints(
  minWidth: 100,
  maxWidth: 300,
  minHeight: 50,
  maxHeight: 200,
)

21. Container Alignment with Multiple Widgets

A Container accepts only one direct child. To place multiple widgets inside it, use a layout widget such as Column, Row or Stack.

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(15),
  ),
  child: Column(
    children: [
      const Icon(
        Icons.flutter_dash,
        color: Colors.white,
        size: 50,
      ),
      const SizedBox(height: 10),
      const Text(
        'Flutter',
        style: TextStyle(
          color: Colors.white,
          fontSize: 22,
        ),
      ),
    ],
  ),
)

22. Creating a Profile Card

Container(
  width: 320,
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 10,
        offset: const Offset(0, 5),
      ),
    ],
  ),
  child: Column(
    children: [
      const CircleAvatar(
        radius: 45,
        child: Icon(
          Icons.person,
          size: 50,
        ),
      ),
      const SizedBox(height: 15),
      const Text(
        'John Doe',
        style: TextStyle(
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 5),
      const Text(
        'Flutter Developer',
        style: TextStyle(
          color: Colors.grey,
        ),
      ),
    ],
  ),
)

23. Creating a Login Form Container

Container(
  padding: const EdgeInsets.all(20),
  margin: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 10,
      ),
    ],
  ),
  child: Column(
    children: [
      const Text(
        'Login',
        style: TextStyle(
          fontSize: 26,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 20),
      const TextField(
        decoration: InputDecoration(
          labelText: 'Email',
          border: OutlineInputBorder(),
        ),
      ),
      const SizedBox(height: 15),
      const TextField(
        obscureText: true,
        decoration: InputDecoration(
          labelText: 'Password',
          border: OutlineInputBorder(),
        ),
      ),
      const SizedBox(height: 20),
      SizedBox(
        width: double.infinity,
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Login'),
        ),
      ),
    ],
  ),
)

24. Container with Transform

The transform property can be used to rotate, scale or otherwise transform a Container before painting.

Container(
  width: 150,
  height: 100,
  color: Colors.blue,
  transform: Matrix4.rotationZ(0.1),
  child: const Center(
    child: Text(
      'Rotated',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

The official Container API includes transform and transformAlignment properties for this purpose. :contentReference[oaicite:3]{index=3}

25. Container vs SizedBox

Use SizedBox for Spacing

Column(
  children: [
    const Text('First'),
    const SizedBox(height: 20),
    const Text('Second'),
  ],
)

26. Container vs Padding

27. Important Container Layout Behavior

Container's final size depends on its child, parent constraints, width, height, alignment and constraints. The official documentation summarizes its layout behavior as attempting to honor alignment, size itself to the child, honor explicit dimensions and constraints, expand to the parent when appropriate, or become as small as possible depending on the constraints. :contentReference[oaicite:4]{index=4}

Example

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: const Text('Fixed Size'),
)

Here, the explicit width and height influence the Container's size.

28. Important Rule: color and decoration

For simple background colors, you can use color. For advanced styling such as borders, gradients, rounded corners and shadows, use decoration.

Simple Color

Container(
  color: Colors.blue,
  child: const Text('Simple Color'),
)

Advanced Decoration

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(15),
    border: Border.all(
      color: Colors.white,
      width: 2,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 8,
      ),
    ],
  ),
  child: const Text('Advanced Styling'),
)

29. Complete Container Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Container Demo'),
        ),
        body: Center(
          child: Container(
            width: 320,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [
                  Colors.blue,
                  Colors.purple,
                ],
              ),
              borderRadius: BorderRadius.circular(20),
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 10,
                  offset: const Offset(0, 5),
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Icon(
                  Icons.flutter_dash,
                  size: 60,
                  color: Colors.white,
                ),
                const SizedBox(height: 15),
                const Text(
                  'Learn Flutter',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 26,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 10),
                const Text(
                  'Build beautiful cross-platform mobile applications.',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white70,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

30. Common Mistakes

Mistake 1: Using Container for Every Spacing Requirement

For simple spacing, SizedBox is often clearer.

const SizedBox(height: 20)

Mistake 2: Forgetting Constraints

A Container inside a Row, Column or scrolling widget can behave differently depending on the available constraints. Always understand the constraints provided by the parent.

Mistake 3: Using Too Many Nested Containers

A large number of unnecessary Containers can make the widget tree harder to understand. Use the simplest widget that satisfies the requirement.

Mistake 4: Confusing Padding and Margin

Remember:

• Padding: space inside.
• Margin: space outside.

Mistake 5: Using color and decoration Together Unnecessarily

When using advanced decoration, put the background color inside BoxDecoration.

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(15),
  ),
)

31. Best Practices

• Use Container when you actually need its layout or styling capabilities.
• Use SizedBox for simple spacing.
• Use Padding when only internal spacing is required.
• Use DecoratedBox when you only need decoration.
• Use BoxDecoration for borders, gradients, shadows and rounded corners.
• Use const wherever possible for static widgets.
• Understand parent constraints before assigning width and height.
• Avoid excessive nesting of Container widgets.
• Use responsive constraints instead of hard-coded dimensions when appropriate.
• Keep UI components reusable by creating custom widgets for repeated Container designs.

32. Real-World Uses of Container

33. Container Widget Quick Revision

34. Interview Questions

Q1. What is Container in Flutter?

Container is a convenience widget used for combining common sizing, positioning, spacing and painting features around a child widget.

Q2. Can Container have multiple children?

No. Container accepts a single child. To display multiple widgets, use a widget such as Row, Column or Stack as the Container's child.

Q3. What is the difference between padding and margin?

Padding creates space inside the Container, while margin creates space outside the Container.

Q4. How do you create rounded corners?

decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(20),
)

Q5. How do you add a border?

decoration: BoxDecoration(
  border: Border.all(
    color: Colors.blue,
    width: 2,
  ),
)

Q6. How do you add a shadow?

decoration: BoxDecoration(
  boxShadow: [
    BoxShadow(
      color: Colors.black26,
      blurRadius: 10,
    ),
  ],
)

Q7. What is the purpose of alignment?

The alignment property controls where the Container's child is positioned inside the Container.

Q8. Can Container have a gradient?

Yes. A gradient can be applied through BoxDecoration.

35. Practice Exercises

1. Create a 200x200 red Container.
2. Create a Container with rounded corners.
3. Create a profile card using Container.
4. Create a product card with an image and price.
5. Create a login form inside a styled Container.
6. Create a gradient banner using Container.
7. Create a dashboard statistics card.
8. Create a Container with a border and shadow.
9. Create three Containers inside a Row.
10. Create three Containers inside a Column.
11. Create a responsive Container using constraints.
12. Create a Container with an image background.

36. Practical Project: Product Card

Container(
  width: 300,
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 10,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        height: 180,
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.grey.shade200,
          borderRadius: BorderRadius.circular(12),
        ),
        child: const Icon(
          Icons.shopping_bag,
          size: 80,
        ),
      ),
      const SizedBox(height: 15),
      const Text(
        'Flutter Product',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 5),
      const Text(
        'Professional Flutter Product',
        style: TextStyle(
          color: Colors.grey,
        ),
      ),
      const SizedBox(height: 10),
      const Text(
        '₹999',
        style: TextStyle(
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

37. Learning Resources

For structured Flutter learning and practical project-based training, explore the JustAcademy Flutter Training course:

JustAcademy Flutter Training

You can also use the following page to register for a course demo:

Register for Flutter Course Demo

JustAcademy's current Flutter course curriculum includes Container among the Flutter layout widgets covered alongside Row, Column and Stack. :contentReference[oaicite:5]{index=5}

For official technical reference:

Flutter Container API Documentation

38. Final Summary

The Container widget is a fundamental Flutter widget for building structured and visually appealing interfaces. It can control size, alignment, spacing and decoration while containing a single child widget. By combining Container with BoxDecoration, EdgeInsets, BorderRadius, BoxShadow, gradients and constraints, developers can create cards, banners, forms, profile sections, product components and many other UI elements.

The most important concepts to remember are:

• width/height control size.
• padding creates internal space.
• margin creates external space.
• alignment positions the child.
• color provides a simple background.
• decoration provides advanced visual styling.
• BoxDecoration supports borders, gradients, shadows and rounded corners.
• constraints control minimum and maximum dimensions.
• transform applies visual transformations.
• child allows one direct child, while Row, Column or Stack can be used when multiple widgets are needed.